﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/JQuery-1-10-2.js" type="text/javascript"></script>
    <script src="../Scripts/Common.js" type="text/javascript"></script>
</head>
<body>
    <div id="show_tab" class="show" style="width: 232px; height: 55px; background: red;  z-index: 1;">
        <table id="djsTab" style=" width: 232px; height: 55px; background: url(http://images2017.cnblogs.com/blog/985607/201708/985607-20170815150240396-1452453245.png);
            text-align: center; text-shadow: 2px 0px 4px grey; font-family: 宋体 SimSun; font-size: 20px">
            <tr style="height: 15px">
                <td rowspan="2" style="width: 26px;">
                </td>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td id="td_Days">
                </td>
                <td id="td_Hours">
                </td>
                <td id="td_Mins">
                </td>
                <td id="td_Secs">
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        //        //移动div
        //        var rDrag = {

        //            o: null,

        //            init: function (o) {
        //                o.onmousedown = this.start;
        //            },
        //            start: function (e) {
        //                var o;
        //                e = rDrag.fixEvent(e);
        //                e.preventDefault && e.preventDefault();
        //                rDrag.o = o = this;
        //                o.x = e.clientX - rDrag.o.offsetLeft;
        //                o.y = e.clientY - rDrag.o.offsetTop;
        //                document.onmousemove = rDrag.move;
        //                document.onmouseup = rDrag.end;
        //            },
        //            move: function (e) {
        //                e = rDrag.fixEvent(e);
        //                var oLeft, oTop;
        //                oLeft = e.clientX - rDrag.o.x;
        //                oTop = e.clientY - rDrag.o.y;
        //                rDrag.o.style.left = oLeft + 'px';
        //                rDrag.o.style.top = oTop + 'px';
        //            },
        //            end: function (e) {
        //                e = rDrag.fixEvent(e);
        //                rDrag.o = document.onmousemove = document.onmouseup = null;
        //            },
        //            fixEvent: function (e) {
        //                if (!e) {
        //                    e = window.event;
        //                    e.target = e.srcElement;
        //                    e.layerX = e.offsetX;
        //                    e.layerY = e.offsetY;
        //                }
        //                return e;
        //            }
        //        }

        //        window.onload = function () {
        //            var obj = document.getElementById('draggable');
        //            rDrag.init(obj);
        //        } 
        ////        $(function () {           
        ////            setInterval(function () {
        ////                var date = new Date();
        ////                var arr = getDJS().split('-');
        ////                $("#td_Days").text("0" + (parseInt(arr[0]) + 1));
        ////                $("#td_Hours").text(arr[1]);
        ////                $("#td_Mins").text(arr[2]);
        ////                $("#td_Secs").text(arr[3]);
        ////            }, 50);


        ////            DragDivDrag("titleBar", "message_box", { opacity: 100, keepOrigin: true });
        ////        });
        ////        window.onload = function () {
        ////            var obj = document.getElementById('draggable');
        ////            rDrag.init(obj);
        //        //        }


        $(document).ready(function () {
            $(".show").mousedown(function (e)//e鼠标事件 
            {
                $(this).css("cursor", "pointer"); //改变鼠标指针的形状 

                var offset = $(this).offset(); //DIV在页面的位置 
                var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离 
                var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离 
                $(document).bind("mousemove", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
                {
                    $(".show").stop(); //加上这个之后 

                    var _x = ev.pageX - x; //获得X轴方向移动的值 
                    var _y = ev.pageY - y; //获得Y轴方向移动的值 

                    $(".show").animate({ left: _x + "px", top: _y + "px" }, 10);
                });

            });

            $(document).mouseup(function () {
                $(".show").css("cursor", "default");
                $(this).unbind("mousemove");
            });
            setInterval(function () {
                var date = new Date();
                var arr = getDJS().split('-');
                $("#td_Days").text("0" + (parseInt(arr[0]) + 1));
                $("#td_Hours").text(arr[1]);
                $("#td_Mins").text(arr[2]);
                $("#td_Secs").text(arr[3]);
            }, 50);
        }) 
    </script>
</body>
</html>
